
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>


<html>
<script type="text/javascript" src="../../static/js/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

<script type="text/javascript" >
    $(function(){
        $("#save").click(function(){
            var date=[];
            $('input[name="date"]:checked').each(function(){
                date.push($(this).val());
            })
            var orderNum=$("#orderNum option:selected").val();
            var orderPer=$("#orderPer option:selected").val();
            var selectList=$("#selectList option:selected").val();
            var jsonData={
                "day":date,
                "orderNum":orderNum,
                "orderPer":orderPer,
                "selectList":selectList
            }

            $.ajax({
                url:"../../printDoctorServlet",
                data:JSON.stringify(jsonData),
                type:"POST",
                dataType:"json",
                tradition: true,
                contentType:'application/json;charset=utf-8',
                async : false,
                success:function(data){
                    var html="";
                    html+="<caption>预约情况报表</caption><tr><td id=\"name\" align=\"center\" valign=\"middle\" >姓名：</td><td id=\"depart\" align=\"center\" valign=\"middle\" >科室：</td>&nbsp</tr><tr><th>&nbsp&nbsp&nbsp</th>";
                    for(var i=0;i<data.isOrder.length;i++){
                        if(data.isOrder[i]!=0){
                            html+="<th align=\"center\" valign=\"middle\" border=\"solid\">星期"+(i+1)+"</th>";
                        }
                    }
                    html+="</tr>";
                    if(orderNum=='是'){
                        html+="<tr><th align=\"center\" valign=\"middle\">预约数</th>";
                        for(var i=0;i<data.isOrder.length;i++){
                            if(data.isOrder[i]!=0){
                                html+="<td align=\"center\" valign=\"middle\">"+data.dayOrder[i]+"</td>";
                            }
                        }
                        html+="</tr>";
                    }
                    if(orderPer=='是'){
                        html+="<tr><th align=\"center\" valign=\"middle\">每日预约率</th>";
                        for(var i=0;i<data.isOrder.length;i++){
                            if(data.isOrder[i]!=0){
                                html+="<td align=\"center\" valign=\"middle\">"+data.per[i].toFixed(2)+"</td>";
                            }
                        }
                        html+="</tr>";
                    }
                    if(selectList=='是'){
                        html+="<tr><th align=\"center\" valign=\"middle\" >总预约率</th><td align=\"center\" valign=\"middle\" colspan=\"7\">"+data.allPer.toFixed(2)+"</td></tr>";

                    }
                    $("#show1").html(html);
                    $("#button").html("<button onclick='aa()' style='font-size: 24px;\n" +
                        "    height: 34px;\n" +
                        "    width: 127px;\n" +
                        "    background-color: white;\n" +
                        "    color: #39bebe;\n" +
                        "    border: 2px solid #39bebe;\n" +
                        "    line-height: 50px;\n" +
                        "    position: absolute;\n" +
                        "    left: 40%;\n" +
                        "    top:500px;\n" +
                        "    border-radius:5px ;'>打印</button>");
                    $("#name").html(data.name);
                    $("#depart").html(data.department);
                },
                error:function(){
                    alert("error");
                    $('#div1').html("error");
                }
            })
        })
    })

</script>
<head>
    <title>Title</title>
    <link title="blue" type="text/css" rel="stylesheet" href="head.css">
</head>
<!--导航栏 -->
<nav>
    <div>
        <span><a href="../../doctor_cm/personal_data/d_personal.jsp">个人资料</a></span>
        <span><a href="../../doctor_cm/order/d_order_set.jsp" >坐诊时间</a></span>
        <span><a href="../../doctor_cm/order/d_order_date.jsp">最大预约数</a></span>
        <span><a href="./d-print.jsp" class="now">预约情况</a></span>
    </div>
    <span>&nbsp&nbsp<c:out value="${ doc.name }"/>医生</span>
    <a href="../../doctor_cm/login/doctor_register.jsp">退出登录</a>
</nav>
<body>
<div id="search">
    <b>请选择你想查询的结果</b>
<%--    <form  method="post">--%>
    <br><br><br>
    <div>
        <label>星期：</label>
        <input type="checkbox" name="date">本周
        <input type="checkbox" name="date" value="1">一
        <input type="checkbox" name="date" value="2">二
        <input type="checkbox" name="date" value="3">三
        <input type="checkbox" name="date" value="4">四
        <input type="checkbox" name="date" value="5">五
        <input type="checkbox" name="date" value="6">六
        <input type="checkbox" name="date" value="7">日
        <br>
        <label>是否显示预约数：</label>
        <select id="orderNum">
            <option>是</option>
            <option>否</option>
        </select><br>
        <label>是否显示预约率：</label>
        <select id="orderPer">
            <option>是</option>
            <option>否</option>
        </select><br>
        <label>是否显示总预约率：</label>
        <select id="selectList">
            <option>是</option>
            <option>否</option>
        </select><br>
        <input type="submit" name="save" id="save" value="显示" >
<%--    </form>--%>
    </div>
</div>
<script>
    // 获取本页表格中最后一行是第几行（对不同高度的表格进行不同的处理）
    var last_counts = $('#show1:last').text();
    //监听pdf导出按键
    aa=function () {
        // 将 id 为 contents 的 div 渲染成 canvas
        html2canvas(document.getElementById("show"), {
            // 渲染完成时调用，获得 canvas
            onrendered: function(canvas) {
                // 从 canvas 提取图片数据
                var imgData = canvas.toDataURL('image/jpeg');

                //初始化pdf，设置相应格式（单位为pt,导出a4纸的大小）
                var doc = new jsPDF("p", "pt", "a4");

                // 初始导出的页面为270（根据引入的图片和每行表格的高度设置）
                var img_high = 270;
                for (var i=1; i<last_counts; i++) {
                    // 然后每增加一行加20的高（因为我的表格是分页的，每页最多26行，所以最高为750）
                    img_high += 20
                }
                doc.addImage(imgData, 50, 65, 1300, img_high);

                //输出保存命名为bill的pdf
                doc.save('bill.pdf');
            },
            // 导出的pdf默认背景颜色为黑色，所以要设置颜色为白（根据自己的需求设置）
            background: '#FFF'
        })
    };
</script>
<div id="show" >
    <table id="show1">

    </table>
</div>
<div id="button"></div>
</body>
</html>
